<template>
	<view class="detail">
		<form @submit="submitForm">
			<view class="card">
				<view class="flex-between">
					<view>
						<view class="list flex" style="width: 600rpx;">
							<view class="left flex">
								<image src="/static/pos-s1.png" mode="widthFix"></image>
								起点
							</view>
							<input class="right" type="text" placeholder="从哪儿出发">
						</view>
						<view class="list flex" style="width: 600rpx;">
							<view class="left flex">
								<image src="/static/pos-e1.png" mode="widthFix"></image>
								终点
							</view>
							<input class="right" type="text" placeholder="你要去哪儿">
						</view>
					</view>
					
					<image src="/static/arrow-both1.png" mode="widthFix" class="arrow"></image>
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/pos2.png" mode="widthFix"></image>
						路线
					</view>
					<textarea class="right" placeholder="例:XX出发,途径X地铁站(推荐上车点),X站上高速,目的地:XX"></textarea>
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/date.png" mode="widthFix"></image>
						时间
					</view>
					<input class="right" type="text" placeholder="请选择出发时间">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/chexing.png" mode="widthFix"></image>
						车型
					</view>
					<input class="right" type="text" placeholder="例:别克英朗">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/chezuo.png" mode="widthFix"></image>
						余座
					</view>
					<input class="right" type="text" placeholder="请选择余座">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/money.png" mode="widthFix"></image>
						A费
					</view>
					<input class="right" type="text" placeholder="请选择A费">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/beizhu.png" mode="widthFix"></image>
						备注
					</view>
					<input class="right" type="text" placeholder="例:顺路上下,预定后电话确认">
				</view>
				<view class="list flex-between">
					<text>请确认您的联系电话：13545612356</text>
					<navigator url="/pages/self/modifyTel" hover-class="none">修改</navigator>
				</view>
			</view>
			<view class="bottom flex">
				<checkbox :checked="isChecked" style="transform: scale(.8);" @click="isChecked = !isChecked"/>
				阅读并同意 
				<navigator url="" hover-class="none">《相关条款》</navigator>
			</view>
			<button form-type="submit">确认修改行程</button>
		</form>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked:false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title:options.title
			})
		}
	}
</script>

<style lang="less">
	page{
		background: #f2f3f4;
	}
	@color: #4CD964;
	.detail{
		padding: 30rpx;
		.card{
			background: white;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			.arrow{
				width: 50rpx;
				height:auto;
			}
			.list{
				padding: 20rpx 0;
				font-size: 30rpx;
				border-bottom: 1rpx solid #f2f3f4;
				.left{
					width: 140rpx;
					font-weight: bold;
					image{
						width: 40rpx;
						height: auto;
						margin-right: 15rpx;
					}
				}
				.right{
					width: 500rpx;
					font-size: 28rpx;
					color:#333;
				}
				text{
					font-size: 28rpx;
					color:#666;
				}
				navigator{
					color:@color
				}
				textarea{
					height: 80rpx;
				}
			}
		}
		.bottom{
			line-height: 3;
			font-size: 28rpx;
			color:#999;
			navigator{
				color:@color
			}
		}
		button{
			margin: 80rpx 0;
			background: @color;
			color:#fff;
			font-size: 32rpx;
		}
	}
</style>
